<template>
  <view>
    <header-bar :title="titleName"> </header-bar>
    <view-tabbar tabIndex="0"></view-tabbar>
    <uni-segmented-control
      :current="current"
      :values="items"
      @clickItem="onClickItem"
      styleType="text"
      activeColor="rgb(0,132,255)"
    ></uni-segmented-control>
    <view class="content">
      <view v-show="current === 0">
        <uni-easyinput
          prefixIcon="scan"
          v-model="searchValue"
          placeholder="请输入你要搜索的内容"
        >
        </uni-easyinput>
        <text @click="go" class="text">搜索</text>
        <!-- 轮播图的区域 -->
        <carousel :img-list="imgList" url-key="url" @selected="goto" />
        <!-- 分类导航区域 -->
        <view class="nav-list">
          <view
            class="nav-item"
            v-for="(item, i) in navList_1"
            :key="i"
            @click="navClickHandler(item)"
          >
            <image :src="item.src" class="nav-img"></image>
            <h1>{{ item.name }}</h1>
          </view>
        </view>
        <view class="act">
          <view class="t_box">
            <view class="title">精选商品</view>
          </view>
          <view class="point_con">
            <swiper
              class="swiper-box"
              :indicator-dots="false"
              :autoplay="true"
              :interval="5000"
              :duration="1000"
              circular="true"
            >
              <swiper-item :wx:for="goods_list" wx:key="index">
                <view
                  class="point_flex"
                  :wx:for="item.goods"
                  wx:for-item="its"
                  wx:key="key"
                >
                  <image class="point_img" :src="its.img"></image>
                  <view class="point_text">{{ its.title }}</view>
                </view>
              </swiper-item>
            </swiper>
          </view>
        </view>
        <!-- 限时秒购部分 -->
        <view class="time">
          <view class="timeTop">
            <view class="logo">
              <image
                src="https://s2.loli.net/2022/06/01/n2COmdZP6hl1Eo7.png"
                mode=""
              ></image>
              <text>限时公益拍卖</text>
            </view>
            <view class="timeFinish">
              <text>距结束</text>
              <uni-countdown
                :font-size="15"
                :show-day="false"
                :hour="12"
                :minute="55"
                :second="0"
                color="black"
                backgroundColor="#c2fcff"
              />
            </view>
          </view>
          <view class="timeBottom" @click="goto_1">
            <view
              class="timeItem"
              v-for="(timeItem, timeIndex) in timeList"
              :key="timeIndex"
            >
              <image :src="timeItem.timeUrl"></image>
              <view class="timeText">
                <text class="timeText1">￥{{ timeItem.timeText1 }}</text>
                <text class="timeText2">￥{{ timeItem.timeText2 }}</text>
              </view>
            </view>
          </view>
        </view>
        <!-- 热门活动 -->
        <view class="hot_box">
          <view class="flex-row hot_title">
            <image src="https://s2.loli.net/2022/06/02/WQf4uCS7rRVLa81.png" />
            <text>热门</text>
          </view>
          <view class="flex-row" @click="goto">
            <image
              src="https://s2.loli.net/2022/06/02/Ev26lz5G7K8bxSI.jpg"
              class="floor1_icon"
              mode="aspectFill"
            />
            <view>
              <image
                src="https://img1.baidu.com/it/u=3479299537,2010583143&fm=253&fmt=auto&app=138&f=JPG?w=750&h=300"
                class="floor2_icon"
                mode="aspectFill"
              />
              <image
                src="https://img1.baidu.com/it/u=1650131646,3110145919&fm=253&fmt=auto&app=138&f=JPEG?w=1500&h=500"
                class="floor2_icon"
                mode="aspectFill"
              />
            </view>
          </view>
        </view>
        <!-- 近期资讯 -->
        <view class="hot_box">
          <image
            class="floor-title"
            src="https://s2.loli.net/2022/05/29/iEA5IHehu2MZWNd.png"
            mode=""
          >
          </image>
          <view class="flex-row hot_title">
            <image
              src="https://s2.loli.net/2022/06/02/7mUvZb1WkxXEsFc.png"
              class="news_icon"
            />
            <text>以物换物</text>
          </view>
          <view class="flex-row news_box" @click="goto">
            <image
              src="https://img11.360buyimg.com/n1/jfs/t1/135257/32/22355/280244/61e90204E52ca6244/a5bc31c99ad3401e.jpg.avif"
              class="g_icon"
            />
            <view class="news_info">
              <view class="line_ellipsis"
                >尊福林 园艺工具套装家用种植工具箱种菜种花多肉松土铲子</view
              >
              <view class="flex-row news_item">
                <image
                  src="https://s2.loli.net/2022/05/26/rdRQtgNxYy8WFIw.jpg"
                ></image>
                <text>猫猫没有猫耳朵</text>
                <view class="price">¥14.9</view>
              </view>
            </view>
          </view>
          <view class="flex-row news_box" @click="goto">
            <image
              src="https://img14.360buyimg.com/n1/jfs/t1/214078/21/311/232262/6167d570E012daaed/43f3043ab9fad1a4.jpg.avif"
              class="g_icon"
            />
            <view class="news_info">
              <view class="line_ellipsis"
                >朔铠园艺工具套装种花剪养花工具箱家用阳台盆景栽花大号</view
              >
              <view class="flex-row news_item">
                <image src="/static/tab_icons/1.png"></image>
                <text>鹿鹿迷路了i</text>
                <view class="price">¥99</view>
              </view>
            </view>
          </view>
          <view class="flex-row hot_title">
            <image
              src="https://s2.loli.net/2022/06/02/KNLxMl5Tam6vEky.png"
              class="news_icon"
            />
            <text>以款换物</text>
          </view>
          <view class="flex-row news_box" @click="goto">
            <image
              src="https://img12.360buyimg.com/n1/jfs/t1/167508/36/10422/162130/6034d1e0E2e7d9370/424df372a83a04c6.jpg.avif"
              class="g_icon"
            />
            <view class="news_info">
              <view class="line_ellipsis"
                >电动喷雾器农用手提式打药机农药弥雾机喷雾机高压充电</view
              >
              <view class="flex-row news_item">
                <image src="/static/tab_icons/1.png"></image>
                <text>鹿鹿迷路了i</text>
                <view class="price">¥159</view>
              </view>
            </view>
          </view>
          <view class="flex-row news_box" @click="goto">
            <image
              src="https://img11.360buyimg.com/n1/jfs/t1/185124/21/25006/842299/628b8da8E6ec44409/3834c97c65d0bfec.png.avif"
              class="g_icon"
            />
            <view class="news_info">
              <view class="line_ellipsis"
                >农业肥料下肥双管手动施肥器追肥器玉米果树颗粒肥机器撒肥机</view
              >
              <view class="flex-row news_item">
                <image src="/static/tab_icons/1.png"></image>
                <text>鹿鹿迷路了i</text>
                <view class="price">¥19.5</view>
              </view>
            </view>
          </view>
          <image
            class="floor-title"
            src="https://s2.loli.net/2022/05/29/iEA5IHehu2MZWNd.png"
            mode=""
          >
          </image>
          <view class="flex-row hot_title">
            <image
              src="https://s2.loli.net/2022/06/02/NginYeKdOSsGFMC.png"
              class="news_icon"
            />
            <text>公益拍卖</text>
          </view>
          <view class="flex-row news_box" @click="goto">
            <image
              src="https://img20.360buyimg.com/babel/s150x150_jfs/t1/156411/14/8523/111345/6017bd13E492ea54a/6dd2b526cd57b33e.jpg.webp"
              class="g_icon"
            />
            <view class="news_info">
              <view class="line_ellipsis"
                >JOY STUDIO JOY 艺术公仔系列（波普）浓浓艺术气息，给你一</view
              >
              <view class="flex-row news_item">
                <image
                  src="https://s2.loli.net/2022/05/26/rdRQtgNxYy8WFIw.jpg"
                ></image>
                <text>猫猫没有猫耳朵</text>
                <view class="price">¥99</view>
              </view>
            </view>
          </view>
          <view class="flex-row news_box" @click="goto">
            <image
              src="https://img14.360buyimg.com/n1/jfs/t1/199641/26/24185/118597/62986c58E672c5bf7/89a01683a776eb81.jpg.avif"
              class="g_icon"
            />
            <view class="news_info">
              <view class="line_ellipsis"
                >德国银龙岛 大功率石材切割机瓷砖多功能手提云石机开槽机</view
              >
              <view class="flex-row news_item">
                <image
                  src="https://s2.loli.net/2022/05/26/rdRQtgNxYy8WFIw.jpg"
                ></image>
                <text>猫猫没有猫耳朵</text>
                <view class="price">¥198</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-show="current === 1">
        <uni-easyinput
          prefixIcon="scan"
          v-model="searchValue"
          placeholder="请输入你要搜索的内容"
        >
        </uni-easyinput>
        <text class="text" @click="go">搜索</text>
        <!-- 轮播图的区域 -->
        <carousel :img-list="imgList" url-key="url" @selected="goto" />
        <!-- 分类导航区域 -->
        <view class="nav-list">
          <view
            class="nav-item"
            v-for="(item, i) in navList"
            :key="i"
            @click="navClickHandler(item)"
          >
            <image :src="item.src" class="nav-img"></image>
            <h1>{{ item.name }}</h1>
          </view>
        </view>
        <view class="act">
          <view class="t_box">
            <view class="title">精选商品</view>
          </view>
          <view class="point_con">
            <swiper
              class="swiper-box"
              :indicator-dots="false"
              :autoplay="true"
              :interval="5000"
              :duration="1000"
              circular="true"
            >
              <swiper-item :wx:for="goods_list" wx:key="index">
                <view
                  class="point_flex"
                  :wx:for="item.goods"
                  wx:for-item="its"
                  wx:key="key"
                >
                  <image class="point_img" :src="its.img"></image>
                  <view class="point_text">{{ its.title }}</view>
                </view>
              </swiper-item>
            </swiper>
          </view>
        </view>
        <!-- 限时秒购部分 -->
        <view class="time">
          <view class="timeTop">
            <view class="logo">
              <image
                src="https://s2.loli.net/2022/06/01/n2COmdZP6hl1Eo7.png"
                mode=""
              ></image>
              <text>限时公益拍卖</text>
            </view>
            <view class="timeFinish">
              <text>距结束</text>
              <uni-countdown
                :font-size="15"
                :show-day="false"
                :hour="12"
                :minute="55"
                :second="0"
                color="black"
                backgroundColor="#c2fcff"
              />
            </view>
          </view>
          <view class="timeBottom" @click="goto_1">
            <view
              class="timeItem"
              v-for="(timeItem, timeIndex) in timeList"
              :key="timeIndex"
            >
              <image :src="timeItem.timeUrl"></image>
              <view class="timeText">
                <text class="timeText1">￥{{ timeItem.timeText1 }}</text>
                <text class="timeText2">￥{{ timeItem.timeText2 }}</text>
              </view>
            </view>
          </view>
        </view>
        <!-- 热门活动 -->
        <view class="hot_box">
          <view class="flex-row hot_title">
            <image src="https://s2.loli.net/2022/06/02/WQf4uCS7rRVLa81.png" />
            <text>热门</text>
          </view>
          <view class="flex-row" @click="goto">
            <image
              src="https://s2.loli.net/2022/06/02/Ev26lz5G7K8bxSI.jpg"
              class="floor1_icon"
              mode="aspectFill"
            />
            <view>
              <image
                src="https://img1.baidu.com/it/u=3479299537,2010583143&fm=253&fmt=auto&app=138&f=JPG?w=750&h=300"
                class="floor2_icon"
                mode="aspectFill"
              />
              <image
                src="https://img1.baidu.com/it/u=1650131646,3110145919&fm=253&fmt=auto&app=138&f=JPEG?w=1500&h=500"
                class="floor2_icon"
                mode="aspectFill"
              />
            </view>
          </view>
        </view>
        <!-- 近期资讯 -->
        <view class="hot_box">
            <image
              class="floor-title"
              src="https://s2.loli.net/2022/05/29/iEA5IHehu2MZWNd.png"
              mode=""
            >
            </image>
            <view class="flex-row hot_title">
              <image
                src="https://s2.loli.net/2022/06/02/7mUvZb1WkxXEsFc.png"
                class="news_icon"
              />
              <text>以物换物</text>
            </view>
            <view class="flex-row news_box" @click="goto">
              <image
                src="https://img11.360buyimg.com/n1/jfs/t1/135257/32/22355/280244/61e90204E52ca6244/a5bc31c99ad3401e.jpg.avif"
                class="g_icon"
              />
              <view class="news_info">
                <view class="line_ellipsis"
                  >尊福林 园艺工具套装家用种植工具箱种菜种花多肉松土铲子</view
                >
                <view class="flex-row news_item">
                  <image
                    src="https://s2.loli.net/2022/05/26/rdRQtgNxYy8WFIw.jpg"
                  ></image>
                  <text>猫猫没有猫耳朵</text>
                  <view class="price">¥14.9</view>
                </view>
              </view>
            </view>
            <view class="flex-row news_box" @click="goto">
              <image
                src="https://img14.360buyimg.com/n1/jfs/t1/214078/21/311/232262/6167d570E012daaed/43f3043ab9fad1a4.jpg.avif"
                class="g_icon"
              />
              <view class="news_info">
                <view class="line_ellipsis"
                  >朔铠园艺工具套装种花剪养花工具箱家用阳台盆景栽花大号</view
                >
                <view class="flex-row news_item">
                  <image src="/static/tab_icons/1.png"></image>
                  <text>鹿鹿迷路了i</text>
                  <view class="price">¥99</view>
                </view>
              </view>
            </view>
            <view class="flex-row hot_title">
              <image
                src="https://s2.loli.net/2022/06/02/KNLxMl5Tam6vEky.png"
                class="news_icon"
              />
              <text>以款换物</text>
            </view>
            <view class="flex-row news_box" @click="goto">
              <image
                src="https://img12.360buyimg.com/n1/jfs/t1/167508/36/10422/162130/6034d1e0E2e7d9370/424df372a83a04c6.jpg.avif"
                class="g_icon"
              />
              <view class="news_info">
                <view class="line_ellipsis"
                  >电动喷雾器农用手提式打药机农药弥雾机喷雾机高压充电</view
                >
                <view class="flex-row news_item">
                  <image src="/static/tab_icons/1.png"></image>
                  <text>鹿鹿迷路了i</text>
                  <view class="price">¥159</view>
                </view>
              </view>
            </view>
            <view class="flex-row news_box" @click="goto">
              <image
                src="https://img11.360buyimg.com/n1/jfs/t1/185124/21/25006/842299/628b8da8E6ec44409/3834c97c65d0bfec.png.avif"
                class="g_icon"
              />
              <view class="news_info">
                <view class="line_ellipsis"
                  >农业肥料下肥双管手动施肥器追肥器玉米果树颗粒肥机器撒肥机</view
                >
                <view class="flex-row news_item">
                  <image src="/static/tab_icons/1.png"></image>
                  <text>鹿鹿迷路了i</text>
                  <view class="price">¥19.5</view>
                </view>
              </view>
            </view>
            <image
              class="floor-title"
              src="https://s2.loli.net/2022/05/29/iEA5IHehu2MZWNd.png"
              mode=""
            >
            </image>
            <view class="flex-row hot_title">
              <image
                src="https://s2.loli.net/2022/06/02/NginYeKdOSsGFMC.png"
                class="news_icon"
              />
              <text>公益拍卖</text>
            </view>
            <view class="flex-row news_box" @click="goto">
              <image
                src="https://img20.360buyimg.com/babel/s150x150_jfs/t1/156411/14/8523/111345/6017bd13E492ea54a/6dd2b526cd57b33e.jpg.webp"
                class="g_icon"
              />
              <view class="news_info">
                <view class="line_ellipsis"
                  >JOY STUDIO JOY 艺术公仔系列（波普）浓浓艺术气息，给你一</view
                >
                <view class="flex-row news_item">
                  <image
                    src="https://s2.loli.net/2022/05/26/rdRQtgNxYy8WFIw.jpg"
                  ></image>
                  <text>猫猫没有猫耳朵</text>
                  <view class="price">¥99</view>
                </view>
              </view>
            </view>
            <view class="flex-row news_box" @click="goto">
              <image
                src="https://img14.360buyimg.com/n1/jfs/t1/199641/26/24185/118597/62986c58E672c5bf7/89a01683a776eb81.jpg.avif"
                class="g_icon"
              />
              <view class="news_info">
                <view class="line_ellipsis"
                  >德国银龙岛 大功率石材切割机瓷砖多功能手提云石机</view
                >
                <view class="flex-row news_item">
                  <image
                    src="https://s2.loli.net/2022/05/26/rdRQtgNxYy8WFIw.jpg"
                  ></image>
                  <text>猫猫没有猫耳朵</text>
                  <view class="price">¥198</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      <view v-show="current === 2">
        <uni-easyinput
          prefixIcon="scan"
          v-model="searchValue"
          placeholder="请输入你要搜索的内容"
        >
        </uni-easyinput>
        <text class="text" @click="go">搜索</text>
        <!-- 轮播图的区域 -->
        <carousel :img-list="imgList" url-key="url" @selected="goto" />
        <!-- 分类导航区域 -->
        <view class="nav-list">
          <view
            class="nav-item"
            v-for="(item, i) in navList_1"
            :key="i"
            @click="navClickHandler(item)"
          >
            <image :src="item.src" class="nav-img"></image>
            <h1>{{ item.name }}</h1>
          </view>
        </view>
        <view class="act">
          <view class="t_box">
            <view class="title">精选商品</view>
          </view>
          <view class="point_con">
            <swiper
              class="swiper-box"
              :indicator-dots="false"
              :autoplay="true"
              :interval="5000"
              :duration="1000"
              circular="true"
            >
              <swiper-item :wx:for="goods_list" wx:key="index">
                <view
                  class="point_flex"
                  :wx:for="item.goods"
                  wx:for-item="its"
                  wx:key="key"
                >
                  <image class="point_img" :src="its.img"></image>
                  <view class="point_text">{{ its.title }}</view>
                </view>
              </swiper-item>
            </swiper>
          </view>
        </view>
        <!-- 限时秒购部分 -->
        <view class="time">
          <view class="timeTop">
            <view class="logo">
              <image
                src="https://s2.loli.net/2022/06/01/n2COmdZP6hl1Eo7.png"
                mode=""
              ></image>
              <text>限时公益拍卖</text>
            </view>
            <view class="timeFinish">
              <text>距结束</text>
              <uni-countdown
                :font-size="15"
                :show-day="false"
                :hour="12"
                :minute="55"
                :second="0"
                color="black"
                backgroundColor="#c2fcff"
              />
            </view>
          </view>
          <view class="timeBottom" @click="goto_1">
            <view
              class="timeItem"
              v-for="(timeItem, timeIndex) in timeList"
              :key="timeIndex"
            >
              <image :src="timeItem.timeUrl"></image>
              <view class="timeText">
                <text class="timeText1">￥{{ timeItem.timeText1 }}</text>
                <text class="timeText2">￥{{ timeItem.timeText2 }}</text>
              </view>
            </view>
          </view>
        </view>
        <!-- 热门活动 -->
        <view class="hot_box">
          <view class="flex-row hot_title">
            <image src="https://s2.loli.net/2022/06/02/WQf4uCS7rRVLa81.png" />
            <text>热门</text>
          </view>
          <view class="flex-row" @click="goto">
            <image
              src="https://s2.loli.net/2022/06/02/Ev26lz5G7K8bxSI.jpg"
              class="floor1_icon"
              mode="aspectFill"
            />
            <view>
              <image
                src="https://img1.baidu.com/it/u=3479299537,2010583143&fm=253&fmt=auto&app=138&f=JPG?w=750&h=300"
                class="floor2_icon"
                mode="aspectFill"
              />
              <image
                src="https://img1.baidu.com/it/u=1650131646,3110145919&fm=253&fmt=auto&app=138&f=JPEG?w=1500&h=500"
                class="floor2_icon"
                mode="aspectFill"
              />
            </view>
          </view>
        </view>
        <!-- 近期资讯 -->
        <view class="hot_box">
            <image
              class="floor-title"
              src="https://s2.loli.net/2022/05/29/iEA5IHehu2MZWNd.png"
              mode=""
            >
            </image>
            <view class="flex-row hot_title">
              <image
                src="https://s2.loli.net/2022/06/02/7mUvZb1WkxXEsFc.png"
                class="news_icon"
              />
              <text>以物换物</text>
            </view>
            <view class="flex-row news_box" @click="goto">
              <image
                src="https://img11.360buyimg.com/n1/jfs/t1/135257/32/22355/280244/61e90204E52ca6244/a5bc31c99ad3401e.jpg.avif"
                class="g_icon"
              />
              <view class="news_info">
                <view class="line_ellipsis"
                  >尊福林 园艺工具套装家用种植工具箱种菜种花多肉松土铲子</view
                >
                <view class="flex-row news_item">
                  <image
                    src="https://s2.loli.net/2022/05/26/rdRQtgNxYy8WFIw.jpg"
                  ></image>
                  <text>猫猫没有猫耳朵</text>
                  <view class="price">¥14.9</view>
                </view>
              </view>
            </view>
            <view class="flex-row news_box" @click="goto">
              <image
                src="https://img14.360buyimg.com/n1/jfs/t1/214078/21/311/232262/6167d570E012daaed/43f3043ab9fad1a4.jpg.avif"
                class="g_icon"
              />
              <view class="news_info">
                <view class="line_ellipsis"
                  >朔铠园艺工具套装种花剪养花工具箱家用阳台盆景栽花大号</view
                >
                <view class="flex-row news_item">
                  <image src="/static/tab_icons/1.png"></image>
                  <text>鹿鹿迷路了i</text>
                  <view class="price">¥99</view>
                </view>
              </view>
            </view>
            <view class="flex-row hot_title">
              <image
                src="https://s2.loli.net/2022/06/02/KNLxMl5Tam6vEky.png"
                class="news_icon"
              />
              <text>以款换物</text>
            </view>
            <view class="flex-row news_box" @click="goto">
              <image
                src="https://img12.360buyimg.com/n1/jfs/t1/167508/36/10422/162130/6034d1e0E2e7d9370/424df372a83a04c6.jpg.avif"
                class="g_icon"
              />
              <view class="news_info">
                <view class="line_ellipsis"
                  >电动喷雾器农用手提式打药机农药弥雾机喷雾机高压充电</view
                >
                <view class="flex-row news_item">
                  <image src="/static/tab_icons/1.png"></image>
                  <text>鹿鹿迷路了i</text>
                  <view class="price">¥159</view>
                </view>
              </view>
            </view>
            <view class="flex-row news_box" @click="goto">
              <image
                src="https://img11.360buyimg.com/n1/jfs/t1/185124/21/25006/842299/628b8da8E6ec44409/3834c97c65d0bfec.png.avif"
                class="g_icon"
              />
              <view class="news_info">
                <view class="line_ellipsis"
                  >农业肥料下肥双管手动施肥器追肥器玉米果树颗粒肥机器撒肥机</view
                >
                <view class="flex-row news_item">
                  <image src="/static/tab_icons/1.png"></image>
                  <text>鹿鹿迷路了i</text>
                  <view class="price">¥19.5</view>
                </view>
              </view>
            </view>
            <image
              class="floor-title"
              src="https://s2.loli.net/2022/05/29/iEA5IHehu2MZWNd.png"
              mode=""
            >
            </image>
            <view class="flex-row hot_title">
              <image
                src="https://s2.loli.net/2022/06/02/NginYeKdOSsGFMC.png"
                class="news_icon"
              />
              <text>公益拍卖</text>
            </view>
            <view class="flex-row news_box" @click="goto">
              <image
                src="https://img20.360buyimg.com/babel/s150x150_jfs/t1/156411/14/8523/111345/6017bd13E492ea54a/6dd2b526cd57b33e.jpg.webp"
                class="g_icon"
              />
              <view class="news_info">
                <view class="line_ellipsis"
                  >JOY STUDIO JOY 艺术公仔系列（波普）浓浓艺术气息，给你一</view
                >
                <view class="flex-row news_item">
                  <image
                    src="https://s2.loli.net/2022/05/26/rdRQtgNxYy8WFIw.jpg"
                  ></image>
                  <text>猫猫没有猫耳朵</text>
                  <view class="price">¥99</view>
                </view>
              </view>
            </view>
            <view class="flex-row news_box" @click="goto">
              <image
                src="https://img14.360buyimg.com/n1/jfs/t1/199641/26/24185/118597/62986c58E672c5bf7/89a01683a776eb81.jpg.avif"
                class="g_icon"
              />
              <view class="news_info">
                <view class="line_ellipsis"
                  >德国银龙岛 大功率石材切割机瓷砖多功能手提云石机开槽机</view
                >
                <view class="flex-row news_item">
                  <image
                    src="https://s2.loli.net/2022/05/26/rdRQtgNxYy8WFIw.jpg"
                  ></image>
                  <text>猫猫没有猫耳朵</text>
                  <view class="price">¥198</view>
                </view>
              </view>
            </view>
          </view>
        </view>
    </view>
  </view>
</template>

<script>
import badgeMix from "@/mixins/tabbar-badge.js";
import carousel from "@/components/vear-carousel/vear-carousel";

export default {
  mixins: [badgeMix],
  components: {
    carousel,
  },
  data() {
    return {
      titleName: "农租乐",
      timeList: [
        {
          timeId: 0,
          timeUrl:
            "https://gd4.alicdn.com/imgextra/i4/889714865/TB2Z9ezb_JYBeNjy1zeXXahzVXa_!!889714865.jpg ",
          timeText1: 129,
          timeText2: 209,
        },
        {
          timeId: 0,
          timeUrl:
            "https://gd4.alicdn.com/imgextra/i4/3979997939/O1CN01w2luaV28W6zHMoVlX_!!3979997939.jpg",
          timeText1: 269,
          timeText2: 349,
        },
        {
          timeId: 0,
          timeUrl:
            "https://gd1.alicdn.com/imgextra/i1/2650503277/O1CN01aNz2611a4uVHryT0W_!!2650503277.jpg",
          timeText1: 359,
          timeText2: 409,
        },
        {
          timeId: 0,
          timeUrl:
            "https://gd1.alicdn.com/imgextra/i1/2749749389/O1CN01ZQZaZm2JEDPts9FtK_!!2749749389.jpg",
          timeText1: 159,
          timeText2: 189,
        },
      ],
      navList: [
        {
          src: "https://s2.loli.net/2022/05/25/YNS7ZUkrRQFAVvL.png",
          name: "分类",
        },
        {
          src: "https://s2.loli.net/2022/05/25/FHQ2bGZcEganurd.png",
          name: "公益拍",
        },
        {
          src: "https://s2.loli.net/2022/05/25/XGAOIn8LNuRkWZV.png",
          name: "订单",
        },
        {
          src: "https://s2.loli.net/2022/05/25/kRyTiMNCZnYrgzI.png",
          name: "其他",
        },
      ],
      navList_1: [
        {
          src: "https://s2.loli.net/2022/06/02/kv1QIzOPqhRWSGB.png",
          name: "分类",
        },
        {
          src: "https://s2.loli.net/2022/06/02/HXmpW6Rh4yqYAbj.png",
          name: "公益拍",
        },
        {
          src: "https://s2.loli.net/2022/06/02/NuT5G8jqgocsEbA.png",
          name: "订单",
        },
        {
          src: "https://s2.loli.net/2022/06/02/NKC5Ih2Rj8nfDWB.png",
          name: "其他",
        },
      ],
      imgList: [
        {
          url: "https://img0.baidu.com/it/u=3061374647,2629552234&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=309",
          goods_id: 1,
        },
        {
          url: "https://img0.baidu.com/it/u=3932126589,566951650&fm=253&fmt=auto&app=138&f=JPEG?w=1000&h=493",
          goods_id: 2,
        },
        {
          url: "https://img0.baidu.com/it/u=1373077460,771314747&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=300",
          goods_id: 3,
        },
        {
          url: "https://img1.baidu.com/it/u=2997152867,1487761532&fm=253&fmt=auto&app=138&f=JPEG?w=1920&h=500",
          goods_id: 4,
        },
        {
          url: "https://img0.baidu.com/it/u=2715038519,2312673619&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=359",
          goods_id: 5,
        },
      ],
      items: ["关注", "推荐", "同城"],
      current: 1,
      searchValue: "电动喷雾器 | 打药机",
      goods_list: [
        {
          goods: [
            {
              img: "https://gd4.alicdn.com/imgextra/i4/3979997939/O1CN01w2luaV28W6zHMoVlX_!!3979997939.jpg",
              title: "多功能微耕机",
            },
            {
              img: "https://gd3.alicdn.com/imgextra/i2/0/O1CN01HuE7N21Gs6pk7YzjT_!!0-item_pic.jpg",
              title: "插秧机工用",
            },
            {
              img: "https://gd3.alicdn.com/imgextra/i3/2210231034022/O1CN01arfldA1fa7e1gLKWu_!!2210231034022.jpg",
              title: "多功能播种机",
            },
          ],
        },
        {
          goods: [
            {
              img: "https://gd3.alicdn.com/imgextra/i3/0/O1CN01PZZD7o25ZMzqbsE2L_!!0-item_pic.jpg",
              title: "条形犁定制",
            },
            {
              img: "https://gd2.alicdn.com/imgextra/i2/2021687649/O1CN01bNzkty26NI7SOVFu4_!!2021687649.jpg",
              title: "农机防滑轮",
            },
            {
              img: "https://gd1.alicdn.com/imgextra/i1/2208068678746/O1CN015Fd92R2ETii8FOxKc_!!2208068678746.jpg",
              title: "大型拖拉机",
            },
          ],
        },
        {
          goods: [
            {
              img: "https://gd3.alicdn.com/imgextra/i3/795096044/O1CN01xO1NhI1uWCRDH1Dep_!!795096044.jpg",
              title: "新式汽油微耕机",
            },
            {
              img: "https://gd1.alicdn.com/imgextra/i1/2212488433754/O1CN01YxUzTs1vIkV20W3dW_!!0-item_pic.jpg",
              title: "防滑轮子",
            },
            {
              img: "https://gd1.alicdn.com/imgextra/i1/2212808273487/O1CN01bkped11bd5oOxQWpQ_!!2212808273487-0-picasso.jpg",
              title: "旋耕刀具农机",
            },
          ],
        },
      ],
      d_num: 3,
    };
  },
  options: {
    styleIsolation: "shared",
  },
  onShareAppMessage() {
    return {
      title: "分享我的小程序",
    };
  },
  methods: {
    goto: function () {
      uni.navigateTo({
        url: "/subpkg/detail/detail",
      });
    },
    goto_1: function () {
      uni.switchTab({
        url: "/pages/logo/logo",
      });
    },
    selectedBanner(item, index) {
      console.log("🥒", item, index);
    },
    go: function () {
      uni.navigateTo({
        url: "/subpkg/search/search",
      });
    },
    onClickItem(e) {
      if (this.current != e.currentIndex) {
        this.current = e.currentIndex;
      }
    },
    navClickHandler(item) {
      if (item.name === "分类") {
        uni.navigateTo({
          url: "/subpkg/cate/cate",
        });
      } else if (item.name === "公益拍") {
        uni.switchTab({
          url: "/pages/logo/logo",
        });
      } else if (item.name === "订单") {
        uni.switchTab({
          url: "/pages/order/order",
        });
      } else {
        uni.switchTab({
          url: "/pages/message/message",
        });
      }
    },
  },
  onBackPress() {
    // #ifdef APP-PLUS
    plus.key.hideSoftKeybord();
    // #endif
  },
};
</script>

<style lang="scss">
.uni-easyinput {
  margin: 20rpx 0 0 20rpx;
  width: 84% !important;
  border-radius: 40rpx;
  background-color: #c2fcff;

  .is-input-border {
    border: none !important;
  }

  .uni-easyinput__content-input {
    font-size: 23.5rpx;
    text-align: center;
  }

  .uni-icons {
    font-size: 45rpx !important;
    color: #575757 !important;
    margin-left: 10rpx;
  }
}

.text {
  position: absolute;
  right: 20rpx;
  margin-top: -57rpx;
  font-size: 30rpx;
}

swiper {
  height: 330rpx;

  .swiper-item,
  image {
    width: 100%;
    height: 100%;
  }
}

.example-body {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  padding: 0;
}

.segmented-control__item.data-v-064e9cd1 {
  background-color: #00d0d0;
  padding-bottom: 30px;
  padding-top: 10px;
}

.uni-searchbar__box {
  border: 1px solid dimgrey;
  border-radius: 30px !important;
  background-color: #d2fdff !important;

  .uni-searchbar__box-search-input {
    font-size: 11px;
    text-align: center;
    color: dimgray;
  }
}

.nav-list {
  display: flex;
  text-align: center;
  justify-content: space-around;
  margin: 18px 0;

  .nav-img {
    width: 110rpx;
    height: 110rpx;
    margin-top: -7px;
  }

  h1 {
    margin-left: 15px;
    font-size: 12px;
    margin-top: 2px;
    margin-left: 0px;
  }
}

.navs-list {
  display: flex;
  justify-content: space-around;

  .navs-img {
    width: 120rpx;
    height: 150rpx;
    margin-left: 10px;
  }

  .img1 {
    width: 150rpx;
    height: 210rpx;
  }

  .img2 {
    width: 160rpx;
  }

  .img3 {
    width: 150rpx;
    margin-left: -2px;
  }

  h1 {
    margin: 5px 0 0 20px;
  }

  h2 {
    font-size: 12px;
    color: dimgrey;
  }

  .h {
    margin-top: -13px;
  }
}

.act {
  margin: 18rpx;
  overflow: hidden;
  position: relative;
  height: 207rpx;
  background: #c2fcff;
  border-radius: 20rpx;
}

.point_con {
  position: absolute;
  top: 19rpx;
  left: 107rpx;
  width: 84%;
  white-space: nowrap;
  overflow-y: auto;
  box-sizing: border-box;
}

.point_con .swiper-box {
  height: 192rpx;
  overflow: hidden;
}

.point_flex {
  float: left;
  width: 33.33%;
  height: 192rpx;
  text-align: center;
}

.point_img {
  display: block;
  width: 150rpx;
  height: 140rpx;
  box-shadow: 0px 3rpx 6rpx rgb(243, 210, 216);
  border-radius: 16rpx;
  margin: 0 auto;
  margin-bottom: 9rpx;
}

.point_text {
  height: 30rpx;
  font-size: 23rpx;
  line-height: 30rpx;
  color: black;
  text-align: center;
}

.t_box {
  width: 110rpx;
  height: 100%;
  background-color: #00d0d0;
  text-align: center;
}

.title {
  white-space: pre-wrap;
  width: 50rpx;
  text-align: center;
  font-weight: 600;
  color: #fff;
  font-size: 30rpx;
  display: inline-block;
  vertical-align: middle;
}

.t_box:after {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.point_flex_w {
  float: left;
  width: 100%;
  height: 192rpx;
  text-align: center;
}

.wd1 {
  width: 28%;
}

.wd2 {
  width: 56%;
}

.floor-title {
  width: 60%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  margin: 10rpx 20%;
}

.time {
  width: 100%;
  background-color: #fff;
  margin-top: 20rpx;

  .timeTop {
    height: 100rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 20rpx;

    .logo {
      image {
        position: relative;
        width: 60rpx;
        height: 60rpx;
        margin-right: 10rpx;
      }

      text {
        position: absolute;
        margin-top: 12rpx;
        font-size: 15px;
      }
    }

    .timeFinish {
      margin-right: 20rpx;
      display: flex;
      align-items: center;

      text {
        font-size: 15px;
        margin-right: 10rpx;
      }
    }
  }

  .timeBottom {
    width: 100%;
    display: flex;
    justify-content: space-around;

    .timeItem {
      margin-top: 10rpx;
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;

      image {
        width: 160rpx;
        height: 160rpx;
        border-radius: 20rpx;
      }

      .timeText {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        margin-top: 15rpx;

        .timeText2 {
          color: #9f9f9f;
          text-decoration: line-through;
        }
      }
    }
  }
}

.custom_head {
  width: 750rpx;
  height: 540rpx;
  background: linear-gradient(0deg, #fcd3cf, #fe6758);
}

.custom_title {
  padding-left: 38rpx;
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
}

.head_swiper {
  margin-top: 20rpx;
}

.swiper_box {
  width: 748rpx;
  height: 358rpx;
  overflow: hidden;
}

swiper-item image {
  width: 100%;
  height: 100%;
}

.swiper_box .wx-swiper-dots.wx-swiper-dots-horizontal {
  margin-bottom: 14rpx;
}

.swiper_box .wx-swiper-dot {
  margin-left: -5rpx;
  width: 12rpx;
  height: 12rpx;
  background: #fff;
  border-radius: 50%;
}

.swiper_box .wx-swiper-dot-active {
  width: 22rpx;
  height: 9rpx;
  border-radius: 4rpx;
  background: #f4d10a;
}

.band_box {
  font-size: 26rpx;
  color: #575757;
  box-sizing: border-box;
  padding: 22rpx 40rpx;
}

.swiper_band {
  width: 100%;
  height: 330rpx;
}

.swiper_band .wx-swiper-dots.wx-swiper-dots-horizontal {
  margin-bottom: -15rpx;
}

.swiper_band .wx-swiper-dot {
  margin-left: -5rpx;
  width: 40rpx;
  height: 10rpx;
  background: rgba(40, 146, 255, 0.5);
  border-radius: 4rpx;
}

.swiper_band .wx-swiper-dot-active {
  width: 40rpx;
  height: 10rpx;
  background: #2892ff;
  border-radius: 4rpx;
}

.band_item {
  width: 25%;
  float: left;
  margin-bottom: 19rpx;
}

.band_icon {
  width: 87rpx;
  height: 87rpx;
  margin-bottom: 11rpx;
  border-radius: 50%;
}

.hot_box {
  margin: 30rpx 30rpx 10rpx;
}

.hot_title image {
  width: 46rpx;
  height: 46rpx;
  border-radius: 50%;
  margin-right: 14rpx;
  margin-top: -6rpx;
}

.hot_title {
  font-size: 30rpx;
  font-weight: bold;
  color: #151515;
  margin-bottom: 30rpx;
}

.flex-row {
  display: flex;
  height: 160%;
}

.floor1_icon {
  width: 258rpx;
  height: 272rpx;
  flex-shrink: 0;
  margin-right: 15rpx;
  border-radius: 10rpx;
}

.floor2_icon {
  width: 418rpx;
  height: 133rpx;
  border-radius: 10rpx;
}

.news_icon {
  width: 55rpx !important;
  height: 55rpx !important;
}

.news_box {
  margin-top: 40rpx;
  width: 687rpx;
  height: 180rpx;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0px 4rpx 24rpx 0px rgba(221, 221, 221, 0.74);
  position: relative;
  margin-bottom: 70rpx;
  box-sizing: border-box;
  padding: 20rpx 46rpx 21rpx 259rpx;
}

.g_icon {
  position: absolute;
  width: 245rpx;
  height: 230rpx;
  top: -26rpx;
  left: -7rpx;
  border-radius: 10rpx;
}

.g2_icon {
  width: 45rpx;
  height: 45rpx;
  margin-right: 11rpx;
}

.news_info {
  word-wrap: break-word;
  word-break: break-all;

  .line_ellipsis {
    font-size: 28rpx;
    width: 410rpx;
  }
}

.news_item {
  margin-top: 25rpx;
  font-size: 24rpx;
  font-weight: bold;
  color: #a9a6a6;

  image {
    width: 41rpx;
    height: 41rpx;
    border-radius: 50%;
    margin-right: 14rpx;
  }

  .price {
    position: absolute;
    right: 35rpx;
    font-size: 30rpx;
    display: block;
    color: deeppink;
    font-weight: bold;
  }
}
</style>
